<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>全屏轮播</title>
<style>
body,html{padding: 0;margin: 0;width: 100%;height: 100%;}
</style>
</head>
<body>
<link rel='stylesheet' href='assets/css/jQuery.carousel.css' type='text/css'>    
<script type="text/javascript" src="assets/js/jQuery-2.2.3.min.js"></script>
<script type="text/javascript" src="assets/js/jQuery.carousel.js"></script>
   
<div class="carousel demo-fullscreen">
    <div class="carousel-item current"><h2>Pic One</h2><img src="assets/images/img1.jpg"></div>
    <div class="carousel-item"><h2>Pic Two</h2><img src="assets/images/img2.jpg"></div>
    <div class="carousel-item"><h2>Pic Three</h2><img src="assets/images/img3.jpg"></div>
</div>
<style>
.carousel-item h2{
	font-size: 50px;font-weight: normal;opacity: 0;transform: scale(.2);-webkit-transform: scale(.2);
	transition: all .24s ease 0s;-webkit-transition: all .24s ease 0s;
}
.carousel-item.current h2{
	opacity: 1;transform: scale(1);-webkit-transform: scale(1);
}
</style>
    
<script>  
$('.demo-fullscreen').carousel({
    size:'fullScreen',
    arrow:{
        show:true
    },
    trigger:{
        show:true
    },
    onLeave: function (index) {
        $('.carousel-item').eq(index).removeClass('current');
    },
    onEnter: function (index) {
        $('.carousel-item').eq(index).addClass('current');
    }
});          
</script>

</body>
</html>
